<template>
  <van-tabbar v-model="active" class="v-tabber" route>
    <van-tabbar-item to="/home">
      <span>首页</span>
      <template #icon="props">
        <img :src="props.active ? icon.home1 : icon.home2" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item  to="/sort">
      <span>分类</span>
      <template #icon="props">
        <img :src="props.active ? icon.sort1 : icon.sort2" />
      </template>
    </van-tabbar-item>
    <!-- <van-tabbar-item to="/surprised">
      <span>惊喜</span>
      <template #icon="props">
        <img :src="props.active ? icon.jx1 : icon.jx1" />
      </template>
    </van-tabbar-item> -->
    <van-tabbar-item to="/cart">
      <span>购物车</span>
      <template #icon="props">
        <img :src="props.active ? icon.cart1 : icon.cart2" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/user">
      <span>未登录</span>
      <template #icon="props">
        <img :src="props.active ? icon.user1 : icon.user2" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'Tabber',
  data() {
    return {
      active: 0,
      icon: {
        home1: this.$img.home1,
        home2: this.$img.home2,
        sort1: this.$img.sort1,
        sort2: this.$img.sort2,
        user1: this.$img.user1,
        user2: this.$img.user2,
        cart1: this.$img.cart1,
        cart2: this.$img.cart2,
        // jx1: this.$img.jx1,
        // jx2: this.$img.jx1,
      },
    }
  },
}
</script>

<style lang="scss" scoped>
  .v-tabber {
    height: 1.333333rem;
    background-color: #fff;
    span {
      font-size: .24rem;
    }
    img {
      width: 1.733333rem;
      height: 1.333333rem;
      margin-top: .293333rem;
    }
  }
</style>